<template>
  <!-- 组件封装的目的：使组件更加灵活，重用性更强。 
       封装的思路原则：在组件重用的时候，页面结构灵活不同，展示的数据灵活不同，操作的事件行为灵活不同
              页面结构灵活不同：使用插槽
              展示数据灵活不同：使用作用域插槽    例如：高级列表组件
              操作的事件行为灵活不同：让事件的操作方法在父组件中执行-->
              
  <div class="box" >

    <section @click="$emit('clickPuTong')">
      <h3>普通插槽</h3>
      <!-- 可以给插槽提供一个默认内容，当父级组件中使用了这个组件但是没有提供任何插槽内容时起作用 -->
      <!-- 一个不带 name 的 <slot> 出口会带有隐含的名字“default”。 -->
      <slot>默认值：world111</slot>
      <slot>默认值：world111</slot>
    </section>


    <section>
      <h3>具名插槽</h3>
      <slot name="first"></slot>
      <slot name="second"></slot>

      <!-- 动态插槽: 已经有多个具有名字的插槽了，不过还不确定内容要放到那个插槽中，可以把 v-slot 指令的参数设置成动态的变量 -->
      <slot name="dynamicSlot"></slot>
      <slot name="dynamicSlot22222"></slot>

      <!-- 遍历多次渲染 <slot> 并每次都提供不同的数据 -->
      <ul>
        <li v-for="(item, index) in slotArr" :key="index">
          <slot name="item" v-bind:item="item"></slot>
        </li>
      </ul>
    </section>


    <section>
      <h3>作用域插槽</h3>
      <slot name="module" :user="user" :parson="parson" ></slot>
      <!-- <slot :parson="parson" name="parsonModule"></slot> -->
    </section>

  </div>
</template>

<script>

export default {
    data(){
        return{
          slotArr: ["三", "四"],
          user:{
            name:"张三",
            age:20,
          },
          parson:{
            name: "李四",
            age:10
          }
        }
    },
    methods:{
      add(){
        alert("nihao")
      }
    },
    created(){
      // this.user.age()
      console.log(this.$slots); //组件所有默认插槽、具名插槽的对象集合，可以用来获取当前组件的插槽集。
      console.log(this.$scopedSlots); //组件所有作用域插槽的对象集合，可以用来获取当前组件的作用域插槽集。
    },
    errorCaptured(err, vm, info){
      console.info(err, vm, info);
    }
}
</script>

<style scoped>
  h3{
    background-color: skyblue;
  }
</style>